<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8" />
    <title>2D transform_CSS参考手册_web前端开发参考手册系列</title>
    <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    <style>
        h1 {
            clear: both;
            padding-top: 10px;
            font-size: 16px;
            font-family: Arial;
        }

        .test {
            zoom: 1;
            width: 700px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .test li {
            float: left;
            margin: 20px 30px 0 0;
            border: 1px solid #000;
        }

        .test li p {
            width: 300px;
            height: 100px;
            margin: 0;
            background: #ddd;
        }

        .test .matrix {
            -moz-transform: matrix(0, 1, 1, 1, 10px, 10px);
            -webkit-transform: matrix(0, 1, 1, 1, 10, 10);
            -ms-transform: matrix(0, 1, 1, 1, 10, 10);
            transform: matrix(0, 1, 1, 1, 10, 10);
        }

        .test .translate p {
            -moz-transform: translate(5%, 10px);
            -webkit-transform: translate(10px, 10px);
            -ms-transform: translate(10px, 10px);
            transform: translate(10px, 10px);
        }

        .test .translate2 p {
            -moz-transform: translate(-10px, -10px);
            -webkit-transform: translate(-10px, -10px);
            -ms-transform: translate(-10px, -10px);
            transform: translate(-10px, -10px);
        }

        .test .translateX p {
            -moz-transform: translateX(20px);
            -webkit-transform: translateX(20px);
            -ms-transform: translateX(20px);
            transform: translateX(20px);
        }

        .test .translate3 p {
            -moz-transform: translate(20px);
            -webkit-transform: translate(20px);
            -ms-transform: translate(20px);
            transform: translate(20px);
        }

        .test .translateY p {
            -moz-transform: translateY(10px);
            -webkit-transform: translateY(10px);
            -ms-transform: translateY(10px);
            transform: translateY(10px);
        }

        .test .translate4 p {
            -moz-transform: translate(0, 10px);
            -webkit-transform: translate(0, 10px);
            -ms-transform: translate(0, 10px);
            transform: translate(0, 10px);
        }

        .test .rotate {
            -moz-transform: rotate(-5deg);
            -webkit-transform: rotate(-5deg);
            -ms-transform: rotate(-5deg);
            transform: rotate(-5deg);
        }

        .test .rotate2 {
            -moz-transform: rotate(5deg);
            -webkit-transform: rotate(5deg);
            -ms-transform: rotate(5deg);
            transform: rotate(5deg);
        }

        .test .scale {
            -moz-transform: scale(.8);
            -webkit-transform: scale(.8);
            -ms-transform: scale(.8);
            transform: scale(.8);
        }

        .test .scale2 {
            -moz-transform: scale(1.2);
            -webkit-transform: scale(1.2);
            -ms-transform: scale(1.2);
            transform: scale(1.2);
        }

        .test .skew {
            -moz-transform: skew(-5deg);
            -webkit-transform: skew(-5deg);
            -ms-transform: skew(-5deg);
            transform: skew(-5deg);
        }

        .test .skew2 {
            -moz-transform: skew(-5deg, -5deg);
            -webkit-transform: skew(-5deg, -5deg);
            -ms-transform: skew(-5deg, -5deg);
            transform: skew(-5deg, -5deg);
        }

        .test .translateZ {
            -moz-transform:rotateZ(60deg);
            -webkit-transform:rotateZ(60deg);
            -ms-transform:rotateZ(60deg);
            transform:rotateZ(60deg);
        }
    </style>
</head>

<body>
    <div>
        translateZ
        <ul class="test">
            <li class="translateZ">
                <p>transform:translateZ(60deg)</p>
            </li>
        </ul>
    </div>
    <h1>矩阵变换：matrix()</h1>
    <ul class="test">
        <li class="matrix">
            <p>transform:matrix(0,1,1,1,10,10)</p>
        </li>
    </ul>
    <h1>平移：translate(), translateX(), translateY()</h1>
    <ul class="test">
        <li class="translate">
            <p>transform:translate(5%,10px)</p>
        </li>
        <li class="translate2">
            <p>transform:translate(-10px,-10px)</p>
        </li>
        <li class="translateX">
            <p>transform:translateX(20px)</p>
        </li>
        <li class="translate3">
            <p>transform:translate(20px)</p>
        </li>
        <li class="translateY">
            <p>transform:translateY(10px)</p>
        </li>
        <li class="translate4">
            <p>transform:translate(0,10px)</p>
        </li>
    </ul>
    <h1>旋转：rotate()</h1>
    <ul class="test">
        <li class="rotate">
            <p>transform:rotate(-15deg)</p>
        </li>
        <li class="rotate2">
            <p>transform:rotate(15deg)</p>
        </li>
    </ul>
    <h1>缩放：scale()</h1>
    <ul class="test">
        <li class="scale">
            <p>transform:scale(.8)</p>
        </li>
        <li class="scale2">
            <p>transform:scale(1.2)</p>
        </li>
    </ul>
    <h1>扭曲：skew()</h1>
    <ul class="test">
        <li class="skew">
            <p>transform:skew(-5deg)</p>
        </li>
        <li class="skew2">
            <p>transform:skew(-5deg,-5deg)</p>
        </li>
    </ul>
</body>

</html>